<template>
<div style="height:100%">
    <a-layout id="components-layout-demo-fixed" >
        <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
            <div class="logout" @click="logout">Logout</div>
            <!-- <a-menu theme="dark" mode="horizontal" @select="select" :default-selected-keys="[selectKey]" :style="{ lineHeight: '64px' }">
                <a-menu-item key="1">
                    search
                </a-menu-item>
                <a-menu-item key="2">
                    return
                </a-menu-item>
            </a-menu> -->
        </a-layout-header>
        <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
            <a-breadcrumb :style="{ margin: '16px 0' }">
                <!-- <a-breadcrumb-item>Home</a-breadcrumb-item> -->
                <!-- <a-breadcrumb-item>List</a-breadcrumb-item>
                <a-breadcrumb-item>App</a-breadcrumb-item> -->
            </a-breadcrumb>
            <div :style="{ background: '#fff', padding: '24px', height:'100%' }">
                <div style="height:100%">
                    <div v-if="selectKey=='1'">
                      <Table></Table>
                    </div>
                    <div v-if="selectKey=='2'">
                      <ReturnTable></ReturnTable>
                    </div>
                    <div v-if="selectKey=='3'">
                      <Table></Table>
                    </div>
                </div>
            </div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
            Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
    </a-layout>
</div>
</template>

<script>
// import moment from 'moment';
// import api from '../api/index';
import api from '../api/index';
import Table from './table.vue';
import ReturnTable from './returnTable.vue';

export default {
  components: {
    Table,
    ReturnTable,
  },
  data() {
    return {
      showAdd: false,
      selectKey: '1',
    };
  },
  mounted() {},
  methods: {
    setCookie(cname, cvalue, exdays) {
      const d = new Date();
      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
      const expires = `expires=${d.toUTCString()}`;
      document.cookie = `${cname}=${cvalue}; ${expires}`;
    },
    logout() {
      api
        .post('/api/logout', this.registerInline)
        .then(() => {
          this.$message.success('logout success');
          this.$router.push({
            name: 'login',
          });
        })
        .catch(({ response }) => {
          this.$message.error(response.data.msg);
          this.$router.push({
            name: 'login',
          });
        });
    },
    showPopup() {
      this.showAdd = true;
    },
    select(e) {
      this.selectKey = e.key;
    },

  },
};
</script>

<style>
#components-layout-demo-fixed .logout {
    width: 40px;
    height: 31px;
    line-height: 31px;
    margin: 16px 24px 16px 0;
    float: right;
    color: white;
    cursor:pointer
}

/* #components-layout-demo-fixed .logout:hover {

} */
</style>
